<template>
    <span class="vxe-cell--label table_column_item" v-if="isFormatter" v-html="formatterValue" />
    <span class="vxe-cell--label table_column_item" v-else-if="isText">{{ textContent }}</span>
    <div class="vxe-cell--label table_column_item" v-else>
        <template v-if="isImage">
            <el-image :src="imageUrl" :preview-src-list="[isImage]" style="width:80px;height:80px;"/>
        </template>
        <tempate v-else-if="isButton">
            <el-button v-if="$utils.isNotEmpty(elComp.label)" v-bind="elComp" @click.native.prevent="clickEvent">
                {{ elComp.label }}
            </el-button>
            <el-button v-else v-bind="elComp" @click.native.prevent="clickEvent"/>
        </tempate>
        <template v-else-if="isCheckBox">
            <el-checkbox v-model="scope.row[column.prop]" v-bind="elComp" @change="changeEvent">
                {{ elComp.label }}
            </el-checkbox>
        </template>
        <template v-else-if="isInput">
            <el-input v-model="scope.row[column.prop]" v-int="elComp.integer" v-double="elComp.double" v-bind="elComp"
                      @change="changeEvent" @input="inputEvent" @blur="blurEvent"/>
        </template>
        <template v-else-if="isInputNumber">
            <el-input-number v-model="scope.row[column.prop]" v-bind="elComp" @change="changeEvent"/>
        </template>
        <template v-else-if="isSelect">
            <el-select v-model="scope.row[column.prop]" v-bind="elComp" @change="changeEvent">
                <el-option v-for="(item, index) in elComp.data_list" :key="index"
                           v-if="filterList(column, scope.row, item)"
                           :label="item[elComp.labelField]" :value="item[elComp.valueField]"/>
            </el-select>
        </template>
        <template v-else-if="isSelectBottom">
            <v-select-bottom v-model="scope.row[column.prop]" v-bind="elComp" @event="handleEvent"/>
        </template>
    </div>
</template>

<script>
export default {
    name: "ColumnItem",
    props: {
        column: {
            type: Object,
            default() {
                return {};
            },
        },
        scope: {
            type: Object,
            default() {
                return {};
            },
        },
        edit: {
            type: Boolean,
            default() {
                return true;
            },
        },
    },
    data() {
        return {};
    },
    computed: {
        columnValue() {
            return this.scope.row[this.column.prop];
        },
        isFormatter() {
            return typeof this.column.formatter === 'function';
        },
        formatterValue() {
            return this.column.formatter(this.scope.row, this.column, this.scope);
        },
        elComp() {
            let elComp = this.getElComp(this.column, this.scope.row);
            if (typeof elComp === 'object') {
                if (typeof elComp.filterDisabled === 'function') {
                    elComp.disabled = elComp.filterDisabled(this.scope.row, this.column);
                }
                if (typeof elComp.labelFn === 'function') {
                    elComp.label = elComp.labelFn(this.scope.row, this.column);
                }
                if (typeof elComp.itemMethod === 'function') {
                    elComp.data_list = elComp.itemMethod(this.scope.row, this.column);
                }
            }
            return elComp;
        },
        isText() {
            return !this.elComp || this.elComp === 'text' || this.elComp.elType === 'text';
        },
        textContent() {
            if (!this.elComp || this.elComp === 'text') {
                return this.columnValue;
            }
            if (this.elComp.elType === 'text' && typeof this.elComp.formatter === 'function') {
                return this.elComp.formatter(this.scope.row, this.column, this.scope);
            }
            return '';
        },
        isImage() {
            return this.elComp.elType === 'image' && this.filter(this.column, this.row);
        },
        imageUrl() {
            if (typeof this.elComp.formatUrl === 'function') {
                return this.elComp.formatUrl(this.columnValue);
            }
            return this.columnValue;
        },
        isButton() {
            return this.elComp.elType === 'button' && this.filter(this.column, this.row);
        },
        isCheckBox() {
            return this.elComp.elType === 'checkbox' && this.filter(this.column, this.row);
        },
        isInput() {
            return this.elComp.elType === 'input' && this.filter(this.column, this.row);
        },
        isInputNumber() {
            return this.elComp.elType === 'inputNumber' && this.filter(this.column, this.row);
        },
        isSelect() {
            return this.elComp.elType === 'select' && this.filter(this.column, this.row);
        },
        isSelectBottom() {
            return this.elComp.elType === 'selectBottom' && this.filter(this.column, this.row);
        },
    },
    methods: {
        getElComp(column, row) {
            let elComp = undefined;
            if (row.elComp && row.elComp[column.prop]) {
                elComp = row.elComp[column.prop];
            }
            if (!elComp && column.elComp) {
                elComp = column.elComp;
            }
            if (elComp === 'text') {
                return elComp;
            }
            if (!this.edit) {
                if (elComp && typeof elComp.formatter === 'function') {
                    return {
                        elType: 'text',
                        formatter: elComp.formatter,
                    };
                }
                return 'text';
            }
            if (elComp) {
                if (elComp.integer === undefined) {
                    elComp.integer = false;
                }
                if (elComp.clearable === undefined) {
                    elComp.clearable = true;
                }
                if (elComp.size === undefined) {
                    elComp.size = 'mini'// 'small';
                }
                if (elComp.integer) {
                    elComp.double = false;
                }
                if (elComp.double === undefined) {
                    elComp.double = false;
                }
                if (elComp.type === 'textarea' && elComp.autosize === undefined) {
                    elComp.autosize = {maxRows: 3};
                }
            }
            return elComp;
        },
        filter(column, row) {
            return !column.filter || (typeof column.filter === 'function' && column.filter(row));
        },
        filterList(column, row, item) {
            let elComp = this.getElComp(column, row);
            return !elComp.filterList || (typeof elComp.filterList === 'function' && elComp.filterList(row, column.prop, item));
        },
        clickEvent() {
            typeof this.elComp.click === 'function' && typeof this.elComp.click(this.scope.row, this.column, this.scope);
        },
        changeEvent() {
            typeof this.elComp.change === 'function' && typeof this.elComp.change(this.scope.row, this.column, this.scope);
        },
        inputEvent() {
            typeof this.elComp.input === 'function' && typeof this.elComp.input(this.scope.row, this.column, this.scope);
        },
        blurEvent() {
            typeof this.elComp.blur === 'function' && typeof this.elComp.blur(this.scope.row, this.column, this.scope);
        },
        handleEvent() {
            typeof this.elComp.event === 'function' && typeof this.elComp.event(this.scope.row, this.column, this.scope);
        },
    },
}
</script>

<style scoped>

</style>
